<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="/image/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击小球游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        h1 {
            margin-bottom: 20px;
        }
        .game-container {
            position: relative;
            width: 80%;
            height: 60vh;
            border: 2px solid #61dafb;
            border-radius: 10px;
            overflow: hidden;
        }
        .ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #61dafb;
            border-radius: 50%;
            cursor: pointer;
        }
        .score {
            margin-top: 20px;
            font-size: 24px;
        }
        .timer {
            margin-top: 10px;
            font-size: 20px;
        }
        .message {
            margin-top: 20px;
            font-size: 24px;
            color: #ff6f61;
        }
    </style>
</head>
<body>
    <h1>点击小球游戏</h1>
    <div class="game-container" id="game-container"></div>
    <div class="score">得分: <span id="score">0</span></div>
    <div class="timer">剩余时间: <span id="timer">30</span> 秒</div>
    <div class="message" id="message"></div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const scoreDisplay = document.getElementById('score');
        const timerDisplay = document.getElementById('timer');
        const messageDisplay = document.getElementById('message');
        let score = 0;
        let timeLeft = 30;
        let gameActive = true;

        // 更新得分
        function updateScore() {
            scoreDisplay.textContent = score;
        }

        // 生成小球
        function createBall() {
            if (!gameActive) return;

            const ball = document.createElement('div');
            ball.classList.add('ball');
            ball.style.left = `${Math.random() * (gameContainer.offsetWidth - 50)}px`;
            ball.style.top = `${Math.random() * (gameContainer.offsetHeight - 50)}px`;

            ball.addEventListener('click', () => {
                if (gameActive) {
                    score++;
                    updateScore();
                    gameContainer.removeChild(ball);
                }
            });

            gameContainer.appendChild(ball);

            // 每隔 1 秒生成一个小球
            setTimeout(createBall, 1000);
        }

        // 更新计时器
        function updateTimer() {
            if (timeLeft > 0) {
                timeLeft--;
                timerDisplay.textContent = timeLeft;
                setTimeout(updateTimer, 1000);
            } else {
                gameActive = false;
                messageDisplay.textContent = `游戏结束！你的得分是 ${score} 分。`;
            }
        }

        // 初始化游戏
        function startGame() {
            createBall();
            updateTimer();
        }

        // 启动游戏
        startGame();
    </script>
</body>
</html>